<template>
	<view class="container">
		<view>录音区域</view>
		<!-- 输入框区域 -->
		<input class="input" v-model="requestUrl" placeholder="请输入请求URL" />
		<input class="input" v-model="contentParam" placeholder="请输入content参数" />
		<input class="input" v-model="fileName" placeholder="请输入文件name属性" />

		<!-- 录音按钮 -->
		<button class="record-btn" @touchstart="startRecording" @touchend="stopRecording">
			长按录音
		</button>
		<view style="margin-top: 20px">post请求区域</view>
		<input class="input" v-model="postUrl" placeholder="请输入请求路径" />
		<textarea auto-height maxlength="-1" class="input" v-model="postParams" placeholder="请输入请求参数" />
		<button class="record-btn" @click="sendPost()">发送</button>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				recorderManager: null,
				isRecording: false,
				tempFilePath: '',
				requestUrl: '', // 请求URL
				contentParam: '', // content参数
				fileName: 'file', // 文件name属性
				postUrl: '',     // post请求地址
				postParams: '',  // 参数
			}
		},
		onLoad() {
			// 初始化录音管理器
			this.recorderManager = uni.getRecorderManager()
			
			// 读取参数
			this.requestUrl = uni.getStorageSync("requestUrl") || ""
			this.contentParam = uni.getStorageSync("contentParam") || ""
			this.fileName = uni.getStorageSync("fileName") || this.fileName
			
			this.postUrl = uni.getStorageSync("postUrl") || ""
			this.postParams = uni.getStorageSync("postParams") || ""
			
			// 录音开始监听
			this.recorderManager.onStart(() => {
				console.log('录音开始')
				uni.showToast({
					title: '录音中...',
					icon: 'none'
				})
			})

			// 录音结束监听
			this.recorderManager.onStop((res) => {
				this.tempFilePath = res.tempFilePath
				console.log('录音文件路径:', res.tempFilePath)
				this.uploadAudio()
			})
		},
		methods: {
			// 开始录音
			startRecording() {
				if (this.isRecording) return

				this.isRecording = true
				this.recorderManager.start({
					duration: 600000,
					format: 'pcm', // 文件格式
					sampleRate: 16000, // 采样率
					numberOfChannels: 1, // 声道数
					// encodeBitRate: 44100, // 编码码率
					// frameSize: 2
				})
			},

			// 停止录音
			stopRecording() {
				if (!this.isRecording) return

				this.isRecording = false
				this.recorderManager.stop()
			},

			// 上传音频
			uploadAudio() {
				if (!this.requestUrl) {
					uni.showToast({
						title: '请先输入请求URL',
						icon: 'none'
					})
					return
				}

				uni.showLoading({
					title: '上传中...'
				})
				
				uni.setStorageSync("requestUrl", this.requestUrl)
				uni.setStorageSync("fileName", this.fileName)
				uni.setStorageSync("contentParam", this.contentParam)

				uni.uploadFile({
					url: this.requestUrl,
					filePath: this.tempFilePath,
					name: this.fileName || 'audiofile',
					formData: {
						content: this.contentParam
					},
					success: (res) => {
						uni.hideLoading()
						if (res.statusCode === 200) {
							uni.showModal({
								title: '上传成功',
								content: JSON.stringify(res.data),
								showCancel: false
							})
						} else {
							uni.showModal({
								title: '请求失败',
								content: `状态码: ${res.statusCode}`,
								showCancel: false
							})
						}
					},
					fail: (err) => {
						uni.hideLoading()
						uni.showModal({
							title: '上传失败',
							content: JSON.stringify(err),
							showCancel: false
						})
					}
				})
			},
			sendPost() {
				if(!this.postUrl) {
					uni.showToast({
						title: '请求地址不能为空',
						icon: 'none'
					})
					return null;
				}
				uni.setStorageSync("postUrl", this.postUrl)
				uni.setStorageSync("postParams", this.postParams)
				
				uni.request({
					url: this.postUrl,
					method: 'POST',
					data: JSON.parse(this.postParams.replace(/\s+/g, '')),
					success: (res) => {
						if (res.statusCode === 200) {
							uni.showModal({
								title: '请求成功',
								content: JSON.stringify(res.data),
								showCancel: false
							})
						} else {
							uni.showModal({
								title: '请求失败',
								content: `状态码: ${res.statusCode}`,
								showCancel: false
							})
						}
					},
					fail: (err) => {
						uni.showModal({
							title: '上传失败',
							content: JSON.stringify(err),
							showCancel: false
						})
					}
				})
			}
		}
	}
</script>

<style>
	.container {
		padding: 20px;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.input {
		width: 100%;
		height: 40px;
		border: 1px solid #ccc;
		border-radius: 5px;
		margin-bottom: 15px;
		padding: 0 10px;
	}

	.record-btn {
		width: 60px;
		height: 60px;
		border-radius: 50%;
		background-color: #007AFF;
		color: white;
		font-size: 16px;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 10px;
	}
</style>